<template>
    <el-dialog title="账单明细" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">

        <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="dataList" v-loading="loading">
            <el-table-column width="200" label="出口申请单号" align="center" prop="id" />
            <el-table-column width="200" label="交易流水号" align="center" prop="innerId" />
            <el-table-column label="费用类型" align="center" width="100">
                <template slot-scope="scope">
                    {{scope.row.type == null ? "":billStatus[scope.row.type].label}}
                </template>
            </el-table-column>
            <el-table-column label="支付方式" align="center" width="200">
                <template slot-scope="scope">
                    {{scope.row.payMode == null ? "":payMode[scope.row.payMode].label}}
                </template>
            </el-table-column>
            <el-table-column width="100" label="金额（元）" align="center" prop="amount" />
            <el-table-column width="200" label="计算公式" align="center" prop="">
                <template slot-scope="scope">
                    {{scope.row.expression == null ? "-":scope.row.expression}}
                </template>
            </el-table-column>

        </el-table>
        <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="billInfo.carList" v-loading="loading" v-if="billInfo.carList!=null && type == 8">
            <el-table-column width="200" label="车辆信息" align="center" prop="carInfo" />
            <el-table-column width="200" label="车架号" align="center" prop="vin" />
        </el-table>
        <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="billInfo.storeBillList" v-loading="loading" v-if="billInfo.storeBillList!=null  && type == 8">
            <el-table-column width="200" label="仓库名称" align="center" prop="storeName" />
            <el-table-column width="200" label="仓储费(天)" align="center" prop="charge" />
            <el-table-column width="200" label="入库费" align="center" prop="feeIn" />
            <el-table-column width="200" label="出库费" align="center" prop="feeOut" />
        </el-table>
        <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="billInfo.carServiceList" v-loading="loading" v-if="billInfo.carServiceList!=null  && type == 9">
            <el-table-column width="200" label="车辆信息" align="center" prop="carInfo" />
            <el-table-column width="200" label="车架号" align="center" prop="vin" />
            <el-table-column width="200" label="服务费利率" align="center" prop="rate" />
            <el-table-column width="200" label="贷款天数" align="center" prop="days" />
        </el-table>
    </el-dialog>
</template>
<script>
import { billStatus, payMode, marginStatus } from "@/utils/status.js";
export default {
    components: {},
    data () {
        return {
            dialogVisible: false,
            loading: false,
            dataList: [
                {
                    type: 0
                }
            ],
            billInfo: {},
            payMode: payMode,
            billStatus: billStatus,
            marginStatus: marginStatus,
        };
    },
    methods: {

        async handleOpen (item) {

            if (item.id) {
                this.type = item.type
                this.dialogVisible = true;
                this.dataList = [];
                this.dataList.push(item);
                const params = {
                    id: item.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerBill/getDetail", params })
                this.billInfo = res
                this.loading = false;
            }
        },
        handleClose () {
            this.dialogVisible = false;
        },
    },
};
</script>
<style  lang="scss">
.nameBlock .el-input-group__append {
    background-color: #409eff;
    color: #fff;
}
</style>
